<template>
  <div v-if="visible" class="el-loading-mask">
    <div class="el-loading-spinner">
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadingSpinner',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.4); /* 半透明遮罩背景 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998; /* 确保遮罩在 loading 动画下 */
}

.el-loading-spinner {
  background: url('@/components/Image/gif-tz.gif') no-repeat center center; /* 动图背景 */
  background-size: 175px 175px; /* 动图尺寸 */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将元素居中 */
  z-index: 9999; /* 确保 loading 动画在最上层 */
}
</style>
